<template>
	<view class="certify">
		<view class="content">
			<view class="line">
				<view class="left">
					<view class="text">人像面</view>
					<view class="button">
						<view :class="`${isUploadOne ? 'button-one' : 'button-two'}`" @click="uploadImg(1)">
							{{ isUploadOne ? '重新上传' : '上传' }}
						</view>
					</view>
				</view>
				<view class="right">
					<image class="image" :src="isUploadOneURL" mode="widthFix"></image>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<view class="text">国徽面</view>
					<view class="button">
						<view :class="`${isUploadTwo ? 'button-one' : 'button-two'}`" @click="uploadImg(2)">
							{{ isUploadTwo ? '重新上传' : '上传' }}
						</view>
					</view>
				</view>
				<view class="right">
					<image class="image" :src="isUploadTwoURL" mode="widthFix"></image>
				</view>
			</view>
			<view class="submit">
				<view class="submit-button" @tap="submit">提交信息</view>
			</view>
			<view class="tips-content">
				<view class="tips">仅用于身份证核实身份</view>
				<view class="tips">拍摄时请保持身份证边框完整、字迹清晰、亮度均衡</view>
			</view>
			<view class="status-reason" v-if="authentic.state == 2 || authentic.state == 0">
				<view :class="`${authentic.state == 0 ? 'status' : 'status-two'}`">
					实名认证状态：{{ authentic.state == 0 ? '审核中' : authentic.state == 2 ? '审核不通过' : '' }}</view>
				<view class="reason" v-if="authentic.state == 2">审核理由：{{ authentic.reason }}</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ maskTips }}</text>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import Fn from '@/common/public.js';
	import {
		RealName_Submit,
		RealName_details
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 用户数据 */
				token: '', // 用户token
				imgUrl: store.state.baseUrl + '/api/common/uploadPic', // 上传图片接口

				/* 身份证上传状态 */
				isUploadOne: false, // 人像面 - 默认：未上传
				isUploadTwo: false, // 国徽面 - 默认：未上传
				authenticFront: '/static/images/mine/certify_front.png', // 正面
				authenticReverse: '/static/images/mine/certify_reverse.png', // 反面
				isUploadOneURL: '', // 已上传身份证正面
				isUploadTwoURL: '', // 已上传身份证反面
				authentic: {
					// isUploadOneURL: '',
					// isUploadTwo: '',
					// reason: '123',
					// state: 2
				}, // 实名认证状态

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
			};
		},
		onLoad() {
			this.isUploadOneURL = this.authenticFront;
			this.isUploadTwoURL = this.authenticReverse;
			this.getAuthentic();
		},
		onShow() {

		},
		methods: {

			/* 获取实名认证 */
			getAuthentic() {
				const that = this;
				RealName_details().then((res) => {
					if (res.status === 1) {
						if (!(!res.data && typeof res.data != "undefined" && res.data != 0)) {
							const result = res.data;
							that.authentic = {
								isUploadOneURL: result.emblem_img,
								isUploadTwoURL: result.portrait_img,
								reason: result.reason,
								state: result.state
							}
							that.isUploadOneURL = that.authentic.isUploadOneURL;
							that.isUploadTwoURL = that.authentic.isUploadTwoURL;
							// console.log(that.authentic.isUploadOneURL)
						}
					} else {
						Fn.Toast(res.msg, 3, 1500);
					}
				})
			},

			/* 上传图片 */
			uploadImg(index) {
				const that = this;
				if (index === 1) {
					uni.chooseImage({
						count: 1, //上传图片的数量，默认是9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
							// 测试上传图片
							// that.isUploadOneURL = tempFilePaths[0];
							if (!(tempFilePaths[0] == that.authenticFront)) {
								that.isUploadOne = true
							}
							uni.uploadFile({
								url: that.imgUrl, //post请求的地址
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									'Token': that.token // 设置Token头部
								},
								formData: {
									'upload_type': 'idCard' //formData是指除了图片以外，额外加的字段
								},
								success: (uploadFileRes) => {
									//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
									var result = JSON.parse(uploadFileRes.data);
									if (result.status === 1) {
										Fn.Toast(result.msg, 3, 1500);
										that.isUploadOneURL = result.data.src;
									} else {
										that.maskTips = result.msg;
										that.showTips = true;
										that.isUploadOne = true;
										that.isUploadOneURL = '';
									};
								},
							});
						},
					});
				} else {
					uni.chooseImage({
						count: 1, //上传图片的数量，默认是9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
							// 测试上传图片
							// that.isUploadTwoURL = tempFilePaths[0];
							if (!(tempFilePaths[0] == that.authenticReverse)) {
								that.isUploadTwo = true
							}
							uni.uploadFile({
								url: that.imgUrl, //post请求的地址
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									'Token': that.token // 设置Token头部
								},
								formData: {
									'upload_type': 'idCard' //formData是指除了图片以外，额外加的字段
								},
								success: (uploadFileRes) => {
									//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
									var result = JSON.parse(uploadFileRes.data);
									if (result.status === 1) {
										Fn.Toast(result.msg, 3, 1500);
										that.isUploadTwoURL = result.data.src;
									} else {
										that.maskTips = result.msg;
										that.showTips = true;
										that.isUploadTwo = true;
										that.isUploadTwoURL = '';
									};
								},
							});
						},
					});
				}
			},

			/* 提交信息 */
			submit() {
				const that = this;
				if (!that.isUploadOne && !that.isUploadTwo) {
					that.showTips = true;
					that.maskTips = "请先上传身份证照片";
				} else {
					const params = {
						emblem_img: that.isUploadOneURL,
						portrait_img: that.isUploadTwoURL
					};
					RealName_Submit(params).then((res) => {
						if (res.status === 1) {
							that.showTips = true;
							that.maskTips = res.msg;
						} else {
							that.showTips = true;
							that.maskTips = res.msg;
						}
					});
				}
			},

			/* 弹窗确认按钮 */
			confirm() {
				this.showTips = false;
				this.getAuthentic();
			},
		}
	}
</script>

<style lang="scss">
	.certify {
		font-family: PingFang_Medium;
		padding-top: 40rpx;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					// font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						font-family: PingFang_Bold;
						// font-weight: bold;
						color: #89898C;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							// cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-family: PingFang_Bold;
							// font-weight: bold;
							// cursor: pointer;
						}
					}
				}
			}
		}

		.content {
			margin: 0 40rpx;

			.line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border: 1px solid #dddddd;

				.left {
					font-size: 26rpx;
					text-align: center;

					.text {
						color: #2D71C8;
						font-size: 34rpx;
					}

					.button {
						margin-top: 40rpx;

						.button-one {
							width: 20vw;
							padding: 10rpx;
							border: 1px solid #2D71C8;
							border-radius: 6rpx;
							color: #2D71C8;
							font-family: PingFang_Bold;
							text-align: center;
							box-sizing: border-box;
						}

						.button-two {
							width: 20vw;
							padding: 10rpx;
							background-color: #2D71C8;
							border-radius: 6rpx;
							color: #FFFFFF;
							font-family: PingFang_Bold;
							text-align: center;
							box-sizing: border-box;
						}
					}
				}

				.right {

					.image {
						width: 50vw;
						height: auto;
					}
				}

				&:nth-of-type(n+2) {
					margin-top: 40rpx;
				}
			}

			.submit {
				// margin: ;
				display: flex;
				justify-content: center;

				.submit-button {
					width: 55vw;
					line-height: 80rpx;
					margin-top: 40rpx;
					font-size: 28rpx;
					// font-weight: 600;
					text-align: center;
					background-color: #2D71C8;
					color: #FFFFFF;
					border-radius: 5px;
					// cursor: pointer;
				}
			}

			.tips-content {
				margin-top: 40rpx;

				.tips {
					display: flex;
					align-items: center;
					color: #686868;
					font-size: 26rpx;
					font-family: PingFang_Bold;

					&:nth-of-type(n+2) {
						margin-top: 20rpx;
					}
				}

				.tips::before {
					content: '';
					display: block;
					width: 12rpx;
					height: 12rpx;
					background-color: #686868;
					border-radius: 50%;
					margin-right: 6px;
				}
			}

			.status-reason {
				margin-top: 40rpx;
				font-family: PingFang_Bold;

				.status {
					color: #2D71C8;
					font-size: 36rpx;
				}

				.status-two {
					color: #ff0000;
					font-size: 34rpx;
				}

				.reason {
					margin-top: 20rpx;
					font-family: PingFang_Medium;
				}
			}
		}
	}
</style>
